import React, { Component } from 'react';
import { Chart, Axis, Tooltip, Geom, Legend } from 'bizcharts';
import Debounce from 'lodash-decorators/debounce';
import Bind from 'lodash-decorators/bind';
import { DataSet } from '@antv/data-set';
// import moment from 'moment';
import autoHeight from '../autoHeight';
import styles from '../index.less';

@autoHeight()
class Bar extends Component {
    state = {
        autoHideXLabels: false,
    };

    componentDidMount() {
        window.addEventListener('resize', this.resize);
    }

    componentWillUnmount() {
        window.removeEventListener('resize', this.resize);
    }

    handleRoot = n => {
        this.root = n;
    };

    handleRef = n => {
        this.node = n;
    };

    @Bind()
    @Debounce(400)
    resize() {
        if (!this.node) {
            return;
        }
        const canvasWidth = this.node.parentNode.clientWidth;
        const { data = [], autoLabel = true } = this.props;
        if (!autoLabel) {
            return;
        }
        const minWidth = data.length * 30;
        const { autoHideXLabels } = this.state;

        if (canvasWidth <= minWidth) {
            if (!autoHideXLabels) {
                this.setState({
                    autoHideXLabels: false,
                });
            }
        } else if (autoHideXLabels) {
            this.setState({
                autoHideXLabels: false,
            });
        }
    }

    render() {
        const {
            height,
            title,
            forceFit = true,
            data,
            // color = 'rgba(24, 144, 255, 0.85)',
            padding,
        } = this.props;

        // const { autoHideXLabels } = this.state;

        const timeScale = {
            type: 'timeCat',
            //   mask: 'YYYY/MM',
        };
        const ds = new DataSet();
        const dv = ds.createView().source(data);
        return (
            <div className={styles.chart} style={{ height }} ref={this.handleRoot}>
                <div ref={this.handleRef}>
                    {title && (
                        <h4
                            style={{
                                marginBottom: 20,
                                paddingLeft: 16,
                                borderLeft: '4px solid #2A76D1',
                            }}
                        >
                            {title}
                        </h4>
                    )}
                    <Chart
                        height={title ? height - 41 : height}
                        forceFit={forceFit || true}
                        data={dv}
                        scale={{ date: timeScale }}
                        padding={padding || 'auto'}
                    >
                        <Legend position="top" layout="horizontal" />
                        <Axis name="date" title={false} />
                        <Axis name="count" min={0} />
                        <Tooltip />
                        <Geom type="intervalStack" position="date*count" color="name" />
                    </Chart>
                </div>
            </div>
        );
    }
}

export default Bar;
